import React, { useState } from 'react';
import { Avatar, Dropdown, Space } from 'antd';
import mobxState from '@/data/mobxStore';
import headerStyle from "./header.module.scss"
import { outLogin } from '@/api/user';
import APPOPTIONS from '@/app.config';
import { SkinOutlined, ExpandOutlined, AppstoreOutlined } from '@ant-design/icons';
import AppConfigLined from './component/AppConfig';
import { useNavigate } from 'react-router-dom';



const items = [
  {
    key: "0",
    label: "用户中心"
  },
  {
    label: '退出登录',
    key: '1',
  },
];

const FrameHeader = () => {
  // 头像那里弹出菜单的点击事件
  const onClick = ({ key }) => {
    switch (key) {
      case "0": toUserCenter(); break;
      case "1": outLogin(); break;
      default:
    }
  };

  const navigate=useNavigate();

  const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
  const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  const GapList = [4, 3, 2, 1];
  const [user, setUser] = useState(UserList[0]);
  const [color, setColor] = useState(ColorList[0]);
  const [gap, setGap] = useState(GapList[0]);

  //跳转用户中心
  const toUserCenter = () => {
    navigate('/system/person/center');
  }

  return (
    <>
      <div className={headerStyle.header_container}>
        <div className='title'>{APPOPTIONS.PUBLICNAME}</div>
        <div className="action">
          <Space>
            {/* <AppConfigLined />
            <SkinOutlined />
            <ExpandOutlined /> */}
            <span className="welcome">{mobxState.userInfo.userName}</span>
            <Dropdown
              menu={{
                items,
                onClick,
              }}
            >
              <span className="userHead">
                <Avatar
                  style={{
                    backgroundColor: color,
                    verticalAlign: 'middle',
                  }}
                  size="large"
                  gap={gap}
                >
                  {user}
                </Avatar>

              </span>
            </Dropdown>
          </Space>

        </div>
      </div>
    </>
  )
}
export default FrameHeader;